//
// Messages
// --------------------------------------------------

// Used by: Inline boxes
span.successmessage, span.errormessage, span.warningmessage, span.infomessage {
  border: none;
}

span.box, span.successmessage, span.errormessage, span.warningmessage, span.infomessage {
  padding: 0 floor(@font-size-base * 0.2);
  box-shadow: none;
  & > .icon-block > img {
    // Style the silk icons
    margin: 0 .6rem 0 .2rem;
    vertical-align: sub;
  }

  & > .icon-block > span.fa {
    // Style the font awesome icons
    margin: 0 .6rem 0 .2rem;
  }
}

// Used by: message boxes
div.successmessage, div.errormessage, div.warningmessage, div.infomessage {
  // In case the structure of the div is not the same as the one from the macro
  // we do not add those new style rules, in order to not break the looks of the content inside.
  // The selector below relies on the class introduced in the IconProvider at
  // the same time as the new style for the message boxes.
  // This makes it so that this new style will never apply on an older hardcoded box.
  &:has(>.icon-block) {
    display: flex;
    gap: 2rem;
    justify-content: left;
    align-items: baseline;
  }
  padding: 2rem;
  border: none;
  border-left: 4px solid;
  box-shadow: none;
  
  & > .icon-block > img {
    max-width: unset;
  }

  // Main message block
  & > div {
    margin: 0;
    flex-grow: 1;
    
    // By default the title is bold.
    & > .box-title {
      font-weight: bold;
    }
  }
}

.box, .plainmessage, // Used by: Code Macro, Success Macro, etc.
fieldset.xwikimessage { // Used by: Login form, Delete messages
  .well;
  overflow-x: auto;
}

// Remove space added by last elements inside box, like paragraphs.
.box > div > *:last-child,
// Do the same when the box macro is edited in-line.
.box > div > .xwiki-metadata-container > *:last-child,
// Keep the previous selector for backwards compatibility with hard coded boxes that didn't get updated
.box > *:last-child, .box > .xwiki-metadata-container > *:last-child {
  margin-bottom: 0;
}

.plainmessage {
  background-repeat: no-repeat;
}

.successmessage {
  .alert-success;
  border-color: @brand-success;
}

.errormessage {
  .alert-danger;
  border-color: @brand-danger;
}

.warningmessage {
  .alert-warning;
  border-color: @brand-warning;
}

.infomessage {
  .alert-info;
  border-color: @brand-primary;
}

// --------------------------------------------------
// Error message
// --------------------------------------------------

// When the error is not inline, display it in a box
div.xwikirenderingerror {
  .box;

  // Put the description box just after the error box, which has a 20px margin (see bootstrap/wells.less).
  & + .xwikirenderingerrordescription {
    margin-top: -20px;
  }
}

// In every cases, apply the DANGER styling from bootstrap
span.xwikirenderingerror, div.xwikirenderingerror {
  .alert-danger;
}

// The description of the error is always displayed as a block. Otherwise it would be difficult to read in 
// some conditions (see: http://jira.xwiki.org/browse/XWIKI-11390).
.xwikirenderingerrordescription {
  .box;
  .border-top-radius(0);
  border-color: @alert-danger-border;
  border-style: solid;
  display: block;
  overflow-x: scroll;
  overflow-y: hidden;
}
